<template>
  <div id="recommend">
  <div style="width: 100%;clear: left;"></div>
		<p class="title">今日推荐</p>
		<div style="width: 100%;height: 20px"></div>
		<div class="slide_area">
			<div class="left_btn"><img src="../../assets/left_btn.png" alt="" @click="left_btn()"></div>
			<div class="slide">
				<ul class="rolling" >
				   <li v-for="(item,index) in today_commend"><img :src="item.img_url" alt="" ></li>
				</ul>
			</div>
			<div class="right_btn"><img src="../../assets/right_btn.png" alt="" @click="right_btn()"></div>
		</div>		
  </div>
</template>
<script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>

export default {
  components:{

  },
  data() {
    return {
    	today_commend:[],
    }
  },
  props:[],
  created:function(){
    //获取今日推荐列表
	this.get_commend_totay();

  },
  mounted:function(){



  },
  methods:{
  	left_btn(){
  		var left=$('.rolling').css('left');
  		left=parseFloat(left)+880;
  		 if(left > 0){
  			left = -parseFloat($('.rolling').eq(0).css('width'))+880;
  		}
        $('.rolling').eq(0).stop(false,true).animate({left:left+'px'});

  	},
  	right_btn(){
  		var left=$('.rolling').css('left');
  		left=parseFloat(left)-880;
  		 if(Math.abs(left) >= parseFloat($('.rolling').eq(0).css('width'))){
  			left = 0;
  		}
        $('.rolling').eq(0).stop(false,true).animate({left:left+'px'});
  	},
 		get_commend_totay(){
		    this.$http({
		        method:'GET',
		        url:'http://123.56.86.203/commend/today',
		    }).then(function(info){
		    	var data=info.data;
		    	if(data.status == 0 ){
		    		this.today_commend=data.info;
	  				var rolling=document.getElementsByClassName('rolling')[0];
	  				var leng=Math.ceil(this.today_commend.length*220 / 880)*880;
	  				rolling.style.width=leng+'px';
		    	}
		    },function(error){
		          console.log(error);
		    })
		}
  }
}
</script>

<style scoped>

#recommend{
  width:1000px;
  margin:0 auto;

}
.title{
	margin-top: 20px;
	font:bold 18px/20px '微软雅黑';
	height: 30px;
	border-bottom: 2px solid #aaa;
}
.slide_area{
	width: 100%;
	height: 260px;
	border:1px solid #ddd;

}
.slide_area .slide{
	width: 880px;
	height: 100%;
	float: left;
	position: relative;
    overflow: hidden;
}
.slide_area .slide ul{
	height: 100%;
	position: absolute;
}
.slide_area .slide ul li{
	padding: 5px 3px;
	margin-left:5px;
	height: 248px;
	width: 206px;
	float: left;
	border-radius: 10px;
	border: 1px solid #ddd;

}
.slide_area .slide ul li img{
	width: 100%;
	height: 100%;
	border-radius: 10px;
	opacity: 0.9;
}
.slide_area .left_btn{
	width: 55px;
	height: 100%;
	float: left;
}
.slide_area .right_btn{
	width: 55px;
	height: 100%;
	float: right;
}
.slide_area .left_btn img{
	width: auto;
	margin-top: 80px;
}
.slide_area .right_btn img{
	width: auto;
	margin-top: 80px;
}
</style>
